<template>

<div class="mainwrap">
  <div class="scheduleview">
      <p class="jindu">问题进度 <span>{{ attentionStore.currentQuestionIndex + 1 }}</span>/ <span> {{ totalQuestionNumbers }}</span></p>
      <div class="barview">
        <div class="probar" :style="{'width': jindu + '%'}"></div>
      </div>
      <p class="tips">请根据您的孩子过去6个月的行为来回答</p>
  </div>
  <div class="maincontent havebottom">
    <div class="babyinfo">
        <div class="nameview">
            <p class="p1">{{ attentionStore.currentQuestionIndex + 1 }}.{{ currentQuestion?.question }}</p>
            <div :class="{'question-option': true,  'seled': currentQuestion.answer == index}" v-for="(option, index) in currentQuestion?.format_options" :key="index" @click="updateAnswer(index)">
                <span class="radioicon"></span>
                <p>{{ option.label }}</p> 
            </div>
        </div>
        <div class="btnview">
          <div class="prebtn">
            <van-button @click="prev" class="btnbox" :disabled="attentionStore.currentQuestionIndex === 0">&lt; 上一题</van-button>
          </div>
          <div class="nextbtn">
            <van-button @click="next" class="btnbox" v-if="attentionStore.currentQuestionIndex < totalQuestionNumbers - 1">下一题 &gt;</van-button>
            <van-button @click="submit" class="btnbox" v-else>查看结果</van-button>
          </div>
        </div>
        <!-- <div class="nextbtnview checkresult">
            <a href="javascript:;" class="btnbox">查看结果</a>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script setup>
import api from "../api";
import {
  showLoadingToast,
  closeToast,
  showFailToast,
  showSuccessToast,
} from "vant";
import { computed } from "vue";

const route = useRoute();
const router = useRouter();
const attentionStore = useAttentionStore();
const infoStore = useInfoStore();

const getAttentionList = () => {
  api
    .getAttentionList()
    .then((res) => {
      attentionStore.setAttentionQuestions(res.data);
    })
    .finally((_) => {
      closeToast();
    });
};

const _checkAnswer = (questionIndex) => {};
const _answer = (questionIndex) => {
  attentionStore.setAttentionCurrentQuestion(questionIndex);
};

const prev = () => {
  attentionStore.currentQuestionIndex--;
  _answer(attentionStore.currentQuestionIndex);
};

const next = () => {
  if (attentionStore.questions[attentionStore.currentQuestionIndex].answer == null) {
    showFailToast("请先选择答案");
    return false;
  }
  attentionStore.currentQuestionIndex++;
  _answer(attentionStore.currentQuestionIndex);
};

const updateAnswer = (answerIndex) => {
  attentionStore.setAttentionQuestionAnswer(attentionStore.currentQuestionIndex, answerIndex);
};

const userAnswers = () => {
  let answers = []
  attentionStore.questions.forEach(el => {
    answers.push({
      question_id: el.id,
      answer_index: el.answer
    })
  });
  return answers
}

const submit = () => {

  if (attentionStore.questions[attentionStore.currentQuestionIndex].answer == null) {
    showFailToast("请先选择答案");
    return false;
  }

  const submitToast = showLoadingToast({
    message: '提交中...',
    forbidClick: true,
    loadingType: 'spinner',
  });

  const data = {
    user_id: infoStore.userId,
    answers: userAnswers()
  }

  api.submitAnswer(data)
  .then(res => {
    if (res.code == 200) {
      showSuccessToast({
        message: "提交成功",
        duration: 3,
        onClose: function() {
          router.replace('/result')
        }
      });
    } else {
      showFailToast(res.message)
    }
  }).finally((_) => {
    submitToast.close()
  })
};

const currentQuestion = computed(() => {
  return attentionStore.questions[attentionStore.currentQuestionIndex];
});
const totalQuestionNumbers = computed(() => {
  return attentionStore.questions.length;
});
const jindu = computed(() => {
  const cur = attentionStore.currentQuestionIndex + 1
  const total = totalQuestionNumbers.value
  return (cur/total) * 100
})

const gotoIndex = () => {
  router.push("/");
};

onMounted(() => {
  if (infoStore.userId == null) {
    showFailToast({
      message: "请先填写宝宝信息后再答题哦~",
      forbidClick: true,
      loadingType: "spinner",
      onClose: function () {
        gotoIndex();
      },
    });
    return false;
  }

  if (attentionStore.questions.length <= 0) {
    showLoadingToast({
      message: "加载中...",
      forbidClick: true,
      loadingType: "spinner",
      duration: 0,
    });
    getAttentionList();
  }
});
</script>
<style>
.current {
  color: red;
}
</style>
<style scoped>
</style>